<template>
	<!-- <div class="tombMain" :style="{background: form.gm_ex27 ? 'url('+form.gm_ex27+') 0% 0% / cover' : `url(${grave}) 0% 0% / 100% 100%` }"> -->
	<!-- <div class="tombMain" :style="{background: form.gm_ex27 ? 'url('+form.gm_ex27+') 50% 50% / 99% 99% no-repeat #7d7272' : `url(${grave}) 50% 50% / 99% 99% no-repeat #7d7272` }"> -->
	<!-- <div class="tombMain" :style="{background: 'url('+form.gm_ex27+') 50% 50% / 99% 99% no-repeat #7d7272' }"> -->
	<div class="tombMain" :style="{background: 'url('+form.gm_ex27+') 50% 50% / 100vw 177vw no-repeat'}" @dblclick="showImagePreview([form.gm_ex27])">
		<!-- 底部 -->
		<footer>
			<div class="tabbarItem" @click="open('prayShow', '')">
				<img src="@/assets/img/tomb/pray.png" >
				<div>祈福</div>
			</div>
			<div class="tabbarItem" @click="open('messageShow', '')">
				<img src="@/assets/img/tomb/message.png" >
				<div>留言</div>
			</div>
			<div class="tabbarItem"  @click="open('friendShow', '')">
				<img src="@/assets/img/tomb/friend.png" >
				<div>亲友</div>
			</div>
		</footer>
		<!-- 设置 -->
		<div v-if="isSetShow" class="set" @click="open('setShow', '')">
			<img src="@/assets/img/tomb/set.png" >
		</div>
		<!-- 祈福 -->
		<van-popup v-model:show="prayShow" position="bottom" style="width: 100%;height: 50vh;background-color: #f7e5b7;">
			<div style="text-align: center;">祈福</div>
			<div class="prayClass">
				<div v-for="(item,index) in gift" :key="'1'+index" class="prayItem" @click="saveGift(item)">
					<img :src="item.thg_ex2" />
					<div>{{item.thg_ex1}}</div>
				</div>
			</div>
		</van-popup>
		<!-- 礼物 -->
		<div class="list-dome-box">
			<div class="slide-wrapper">
				<div class="slide-container">
					<div v-for="(item,index) in form.giftInfo" :key="'2'+index" class="slide-item">
						<template v-if="item.thgi_ex1 == '留言'">
							<img class="giftInfoImg1" :src="item.img ? item.img : defaultAvatar" >
							<div class="giftInfoFont">{{item.name}}{{item.thgi_ex1}}: {{ item.thgi_ex2 }}</div>
						</template>
						<template v-else>
							<img class="giftInfoImg1" :src="item.img ? item.img : defaultAvatar" >
							<div class="giftInfoFont">{{item.name}}送了{{item.thgi_ex1}}</div>
							<img class="giftInfoImg2" :src="item.thgi_url" >
						</template>
					</div>
				</div>
			</div>
		</div>
		<!-- 留言 -->
		<van-popup v-model:show="messageShow"  class="message-class" position="bottom" style="width: 100%;height: 50vh;background-color: #f7e5b7;">
			<div style="text-align: center;">留言</div>
			<template v-for="(item, index) in form.giftInfo">
				<div v-if="item.thgi_ex1 == '留言'"  :key="'3' + index" class="messageClass">
					<img class="giftInfoImg1" :src="item.img ? item.img : defaultAvatar" >
					<div class="messageContent">
						<div style="color: #000a98;">{{ item.name }} {{ item.thgi_dat1 }}</div>
						<div class="messageGift">
							<div>{{ item.thgi_ex2 }}</div>
						</div>
					</div>
				</div>
			</template>
			<div class="msgbox">
				<van-button block type="primary" class="msgPosition" @click="message2Show = true">选择留言</van-button>
				<van-popup v-model:show="message2Show" position="bottom" style="width: 100%; height: 50vh;background-color: #f7e5b7;">
					<van-button 
						v-for="(item, index) in msgtextArr" 
						:key="'6-' + index" 
						block 
						class="msgbtn"
						@click="sendMsg2(item)"
					>
						{{ item }}
					</van-button>
				</van-popup>
				<!-- <van-field v-model="msgValue" clearable placeholder="请输入留言" class="msgPosition">
					<template #button>
						<van-button size="small" type="primary" @click="sendMsg1(msgValue)">发送</van-button>
					</template>
				</van-field> -->
			</div>
		</van-popup>
		<!-- 亲友 -->
		<van-popup v-model:show="friendShow" position="bottom" style="width: 100%;height: 50vh;background-color: #f7e5b7;">
			<div class="friendClass">
				<div v-for="(item,index) in form.friend" :key="'4'+index" :class="['friendContent']">
					<img :class="['friendImg']" :src="item.thu_ex3 ? item.thu_ex3 : defaultAvatar" >
					<div class="friendFont">{{item.thu_ex2}}</div>
				</div>
			</div>
			<van-button block type="primary" style="position: absolute;bottom: 0;background:rgb(94, 169, 241);border:1px solid rgb(94, 169, 241)" @click="open('modifyShow','friendShow')">点击修改名称</van-button>
		</van-popup>
		<!-- 修改昵称 -->
		<van-popup v-model:show="modifyShow" round position="center" style="width: 80%;height: 60vh;">
			<div class="modifyTitle">修改昵称</div>
			<van-form @submit="onSubmit1" >
				<div style="width:100%;text-align:center;display:flex;justify-content: center;">
				</div>
				<van-field name="userurl" label="头像" center>
					<template #input>
						<van-uploader v-model="fileList" :before-delete="beforeDelete('user','userurl')" :after-read="afterRead('user','userurl')" max-count="1" />
					</template>
				</van-field>
				<van-field v-model="form.user.username" label-width="30vw" name="username" required label="名称" placeholder="请输入名称" />
				<div style="width: 60%;margin: 0 auto;">
					<van-button type="primary" block native-type="submit" style="margin-top: 10vw;">保存</van-button>
				</div>
				<!-- <van-button block native-type="button">取消</van-button> -->
			</van-form>
		</van-popup>
		<!-- 设置 -->
		<van-popup v-model:show="setShow" position="center" style="width: 80%;height: 40vh;">
			<van-cell-group style="margin-top: 10vw;">
               <van-cell title="修改口令" is-link @click="open('modifyPwdShow','setShow')" />
			</van-cell-group>
		</van-popup>
		<!-- 修改口令 -->
		<van-popup v-model:show="modifyPwdShow" round position="center" style="width: 80%;height: 50vh;">
			<div class="modifyTitle">修改口令</div>
			<van-form @submit="onModifyPwd" class="modifyPwdClass">
				<van-field v-model="pwd.oldPwd" name="oldPwd" class="password" required label="原口令" placeholder="请输入" />
				<van-field v-model="pwd.newPwd" name="newPwd" class="password" required label="新口令" placeholder="请输入" />
				<van-field v-model="pwd.confirmPwd" name="confirmPwd" class="password" required label="确认口令" placeholder="请输入" />
				<div style="width: 60%;margin: 0 auto;">
					<van-button type="primary" native-type="submit" block>保存</van-button>
				</div>
			</van-form>
		</van-popup>
		
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive, markRaw, onBeforeMount, nextTick, onBeforeUnmount, watch, getCurrentInstance   } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
	import { showLoadingToast, closeToast, showSuccessToast, showFailToast, showDialog, showConfirmDialog, showImagePreview } from 'vant';
    import { useStore } from '@/store'
	import { getHallFirendApi, getHallApi, getGiftInfoApi, saveUserGiftApi, saveUserInfoApi, updatePasswordApi, fileUploadBase64Api, getUserInfoApi } from '@/apis'
    // import { useWeixinLogin2 } from '@/hooks'
	import { dateformatter } from '@/utils/utils'
	const route = useRoute()
	const router = useRouter()
    const store = useStore()
	// 微信授权并且跳转到对应页面
    // useWeixinLogin2(route.query.th_id)

	const defaultAvatar = new URL('@/assets/img/tomb/defaultAvatar.png', import.meta.url).href
	const grave = new URL(`@/assets/img/tomb/tomb-bg-2.png`, import.meta.url).href
	const form = ref({
		data:[
			{
				th_id:'',//主键
				th_ex4:'',//逝者姓名1
				th_ex5:'',//逝者姓名2
				// th_ex6:'',//逝者头像
				th_ex7:'',
				// th_ex12:'',//背景图路径
				th_ex16:'',//模板名称，如果为空，则默认为defaultModel
				ispassword:'',//是否需要口令登录
				//注意如果data变量里的ispassword等于Y，则需要弹出输入口令的界面，然后个人馆的其他界面要全部隐藏起来，输入口令后，点提交后需要在发一个接口到后台
			}
		],
		friend:[
			// {
			// 	thu_ex2:'姓名信息',//昵称
			// 	thu_ex3:'https://img01.yzcdn.cn/vant/cat.jpeg',//头像路径
			// 	thu_id:'',//主键
			// }
		],
		giftInfo:[
			// {
			// 	thgi_ex1:'恩赐祈福',//礼物内容
			// 	thgi_ex2:'',//礼物类型
			// 	thgi_url:'https://img01.yzcdn.cn/vant/cat.jpeg',//礼物图片
			// 	thgi_dat1:'2020-01-01',//送礼物时间
			// 	name:'用户名称',//用户名称
			// 	img:'https://img01.yzcdn.cn/vant/cat.jpeg',//用户头像
			// }
		],
		wordsInfo:[
			
		],
		user:{
			userid:'',//thu_id
			username:'',//昵称
			userurl: 'https://img01.yzcdn.cn/vant/leaf.jpg',//头像路径
		},
		allGift: [
						
		],
		gm_ex27: '', //公墓图
	})
	const msgValue: Ref<string> = ref('')//留言
	
	const msgtextArr: Raw<string[]> = markRaw([
		'带着通达的心处世，用包容的心待人，用快乐的心生活，用感恩的心付出，用进取的心坚持。清明节，关爱生命，开心生活，用爱心感染世界!祝你平安!',
		'诉哀伤，诉不尽对你的念想。泪千行，流不尽思念满腔。清明时节来探望，望不尽你在另一头是否一样安好。愿您天堂一切安好。',
		'祭日清明欲泪流，国旗杆半寄春秋。瘟神肆虐千家痛，骨肉离根万户愁。',
		'清明烛火动春愁，欲泪英魂寄野丘。墓地碑前荒小草，青山寂寂尽啼鸠。',
		'长路漫漫心相连，思亲之心永不变。不怕细雨绵绵降，祭奠先人不畏难。一杯清酒墓前洒，滴滴都把问候传。焚香祷告烧纸钱，点点泪花挂腮边。只愿亲人都安康，幸福生活永不变！',
		'轻风绵绵阴雨天，祭祀清明扫墓间。鲜花束束碑前献，敬酒杯杯忆旧年。默默无言烧纸钱，渺渺烟雾荡云端。只愿先人享平安，亲人永远福绵绵。',
		'雨幕茫茫天苍苍，清明时节心惆怅。郊外凉风断人肠，菊花盛开满地伤，扫墓祭祖泪满裳，诚心悼念来焚香。烟雾缭绕上天堂，保佑逝者永安康。',
	])
	const prayShow: Ref<boolean> = ref(false)
	const gift: Ref<any[]> = ref([
		// {
		// 	thg_ex1:'恩赐祈福',//礼物名称
		// 	thg_ex2:'https://img01.yzcdn.cn/vant/cat.jpeg',//礼物图片
		// 	thg_ex5:'',//类型
		// 	thg_id:'',//礼物主键
		// }
	])
	const messageShow: Ref<boolean> = ref(false)
	const message2Show: Ref<boolean> = ref(false)
	const friendShow: Ref<boolean> = ref(false)
	const modifyShow: Ref<boolean> = ref(false)
	const imgsrc: Ref<string> = ref('')
	const fileList: Ref<any[]> = ref([
		{
			url: 'https://img01.yzcdn.cn/vant/cat.jpeg',
			status: 'done',
			message: '上传完成',
		},
	])
	
	const setShow: Ref<boolean> = ref(false)
	const modifyPwdShow: Ref<boolean> = ref(false)
	const pwd = ref({
		oldPwd: '',
		newPwd: '',
		confirmPwd: ''
	})
	
	const myInterval: Ref<any> = ref('')
	const isSetShow: Ref<boolean> = ref(false)
	
	const showData = reactive({
		prayShow,
		messageShow,
		friendShow,
		setShow,
		modifyShow,
		modifyPwdShow,
	})
	watch([() => store.openid, () => route.query.th_id], (nVal, oVal) => {
		console.log(nVal)
		if (nVal[0] && nVal[1]) {
			console.log(route.query.th_id)
			getHallApi({
				hallId: route.query.th_id, //th_id
			}).then(res=>{
				console.log(res)
				form.value = res
				imgsrc.value=res.user.userurl
				fileList.value = [
					{
						url: res.user.userurl,
						status: 'done',
						message: '上传完成',
					},
				]
				
				nextTick(()=>{
					textSlide()
				})
				
			})
			// 祈福
			getGiftInfoApi().then(res=>{
				console.log(res.data)
				gift.value = res.data
			})
			
			// 设置修改权限
			getUserInfoApi({
				data: JSON.stringify({
					th_id: route.query.th_id,
				})
			}).then(res=>{
				if(res.status == '+OK'){
					isSetShow.value = true
				}
			}).catch(err=>{
			})
		}
	}, {
		immediate: true
	})
	// onBeforeMount(() => {
	// 	getHallApi({
	// 		hallId: route.query.th_id, //th_id
	// 	}).then(res=>{
	// 		console.log(res)
	// 		form.value = res
	// 		imgsrc.value=res.user.userurl
	// 		fileList.value = [
	// 			{
	// 				url: res.user.userurl,
	// 				status: 'done',
	// 				message: '上传完成',
	// 			},
	// 		]
	// 		nextTick(()=>{
	// 			textSlide()
	// 		})
			
	// 	})
	// 	// 祈福
	// 	getGiftInfoApi().then(res=>{
	// 		console.log(res.data)
	// 		gift.value = res.data
	// 	})
		
	// 	// 设置修改权限
	// 	getUserInfoApi({
	// 		data: JSON.stringify({
	// 			th_id: route.query.th_id,
	// 		})
	// 	}).then(res=>{
	// 		if(res.status == '+OK'){
	// 			isSetShow.value = true
	// 		}
	// 	}).catch(err=>{
	// 	})
	// })
	

	onBeforeUnmount(() => {
		clearInterval(myInterval.value)
	})

	const textSlide = () => {
		// 显示区域高度
		const boxDom: any = document.getElementsByClassName('slide-wrapper')[0]
		// 获取当前列表ul
		let ulDom: any = document.getElementsByClassName('slide-container')[0]
		// 获取当前lis
		const liDoms = document.getElementsByClassName('slide-item')
		console.log(document.getElementsByClassName('slide-item'))
		// 单个移动的元素的高度
		// const maxL = liDoms[0].offsetHeight
		let maxL = ulDom.offsetHeight
		console.log('当前元素', ulDom, liDoms, maxL)
		let startL = 0
		// 移动方法
		const moveLi = () => {
			ulDom = document.getElementsByClassName('slide-container')[0]
			maxL = ulDom.offsetHeight
			startL++
			// console.log('startL:---'+startL)
			if (startL >= maxL) {
				startL = -boxDom.offsetHeight
			// let tempData = [...this.form.giftInfo]//深拷贝数据数组
			// const tempLi = tempData.splice(0, 1)//当第一个li完全移出当前列表截取第一个数据
			// tempData.push(...tempLi)//将被截取出去的li的数据放到数组最后一位
			// this.form.giftInfo = tempData
			// console.log('gggggggggggggggggggggggg')
			}
			if(startL>0){
				ulDom.style.top = '-' + startL + 'px'//上移高度
			}else{
				ulDom.style.top = -startL + 'px'//上移高度
			}
			
			// console.log('ulDom.style.top:---'+ulDom.style.top)
		}
		myInterval.value = setInterval(moveLi, 30)
	}
	const open = (val,val2) => {
		showData[val] = true
		if(val2){
			showData[val2] = false
		}
		if(val=="friendShow"){
			getHallFirendApi({
				hallId: route.query.th_id
			}).then(data=>{
				form.value.friend=data.friend;
			})
		} else if (val=="messageShow") {
			messageScrollToBottom()
		}
	}
	// 保存祈福礼物
	const saveGift = (val) => {
		saveUserGiftApi({
			data: JSON.stringify({
				thgi_hallid: form.value.data[0].th_id,
				thgi_mainid: val.thg_id,
				thgi_ex1: val.thg_ex1,
				thgi_ex2: val.thg_ex2,
				thgi_ex3: '微信',
				type: "G",
				// th_company: '凤凰山公墓信息化管理系统'
			})
		}).then(res=>{
			if(res.status == '+OK'){
				getHallApi({
					hallId: route.query.th_id, //th_id
				}).then(res=>{
					form.value = res
				})
			}
		})
		prayShow.value = false
	}

	const sendMsg1 = (val) => {
		if (val) {
			// 调接口
			form.value.wordsInfo.push({
				thgi_ex2: val,//留言内容
				thgi_dat1: dateformatter(new Date()),//留言时间
				name: form.value.user.username,//用户名称
				img: form.value.user.userurl,//用户头像
			})
			saveUserGiftApi({
				data: JSON.stringify({
					thgi_ex2: val,//留言内容
					thgi_hallid: form.value.data[0].th_id,
					thgi_mainid: 0,
				})
			})
		}
		msgValue.value = ''
	}
	const sendMsg2 = (val) => {
		if (val) {
			message2Show.value = false
			form.value.giftInfo.push({
				thgi_ex1: '留言',
				thgi_ex2: val,//留言内容
				thgi_dat1: dateformatter(new Date()),//留言时间
			})
			messageScrollToBottom()
			saveUserGiftApi({
				data: JSON.stringify({
					thgi_ex1: '留言',
					thgi_ex2: val, //留言内容
					thgi_hallid: form.value.data[0].th_id,
					thgi_mainid: 0,
				})
			})
		}
	}
	// 留言滚动到最下面一条
	const messageScrollToBottom = () => {
		nextTick(() => {
			console.log(document.getElementsByClassName('message-class')[0])
			let messageIdDom: any = document.getElementsByClassName('message-class')[0]
			let maxL = messageIdDom.scrollHeight
			let height = messageIdDom.offsetHeight
			console.log(maxL)
			console.log(height)
			messageIdDom.scrollTop = maxL - height
		})
	}
	const onSubmit1 = (val) => {
		showLoadingToast({
			message: '加载中...',
			forbidClick: true,
			duration: 0
		});
		console.log('submit', val);
		saveUserInfoApi({
			data: JSON.stringify({
				name:form.value.user.username,
				img: form.value.user.userurl,
				thu_hallid: route.query.th_id,
			})
		}).then(res=>{
			if(res.status == '+OK'){
				showSuccessToast(res.msg)
				getHallApi({
					hallId: route.query.th_id, //th_id
				}).then(res=>{
					console.log(res)
					form.value = res
				})
			}else{
				showFailToast(res.msg)
			}
			modifyShow.value = false
		}).catch(err=>{
			modifyShow.value = false
			showFailToast('保存失败')
		})
	}
	const afterRead = (filed1, filed2) => {
		return file => {
			file.status = 'uploading';
			file.message = '上传中...';
			fileUploadBase64Api(file.content).then(res=>{
				file.status = 'done';
				file.message = '上传成功';
				form.value[filed1][filed2] = res.url
			}).catch(err=>{
				file.status = 'failed';
				file.message = '上传失败';
			})
		}
	}
	const afterReadAvatar = (filed) => {
		return file => {
			file.status = 'uploading';
			file.message = '上传中...';
			fileUploadBase64Api(file.content).then(res=>{
				file.status = 'done';
				file.message = '上传成功';
				form.value.data[0][filed] = res.url
			}).catch(err=>{
				file.status = 'failed';
				file.message = '上传失败';
			})
		}
	}
	const beforeDelete = (filed1, filed2) => {
		return (file, name) => {
			form.value[filed1][filed2] = ''
			return true
		}
	}
	// 修改口令
	const onModifyPwd = (val) => {
		if(val.newPwd && val.newPwd == val.confirmPwd){
			console.log(1)
			showLoadingToast({
				message: '加载中...',
				forbidClick: true,
				duration: 0
			});
			updatePasswordApi({
				hallId: route.query.th_id,
				oldpwd: val.oldPwd,
				newpwd: val.newPwd,
				msg: '口令'
			}).then(res=>{
				pwd.value.oldPwd = ''
				pwd.value.newPwd = ''
				pwd.value.confirmPwd = ''
				console.log(res.status)
				if(res.status == '+OK'){
					showSuccessToast(res.msg)
				}else{
					showFailToast(res.msg)
				}
				modifyPwdShow.value = false
			}).catch(err=>{
				showFailToast('保存失败')
				modifyPwdShow.value = false
			})
		}else{
			showFailToast('两次口令不一致！')
		}
	}
</script>

<style lang="scss" scoped>
	.tombMain::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// background-color: rgba(100,100,100,0.5);
		background: url(@/assets/img/tomb/tomb-bg-2.png);
		filter: blur(30px);
		z-index: -1;
	}
	.tombMain{
		background: url(~@/assets/img/tomb/grave.png);
		background-size: 100% 100%;
		width: 100vw;
		height: 100vh;
		// display: inline-block
	}
	footer{
		width: 100%;
		position: absolute;
		bottom: 0;
		height: 30vw;
		display: flex;
		justify-content: space-around;
	}
	.tabbarItem{
		background-color: rgba(0, 0, 0, 0.3);
		// margin: 8vw;
		// padding: 1vw;
		// font-size: 4vw;
		// border-radius: 50%;
		width: 50px;
		height: 50px;
		margin: 24px;
		padding: 3px;
		font-size: 18px;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		color: #FFFFFF;
	}
	.tabbarItem > img{
		width: 50%;
		height: 50%;
	}
	.set{
		position: absolute;
		top: 5vw;
		right: 5vw;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		width: 12vw;
		height: 12vw;
		/* display: flex;
		justify-content: center;
		align-items: center; */
	}
	.set img{
		margin: 25%;
		width: 50%;
		height: 50%;
	}
	.prayClass{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.prayItem{
		width: 20vw;
		height: 25vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.prayItem img{
		width: 10vw;
		height: 15vw;
	}
	.giftList{
		width: 100%;
		height: 40vh;
		position: absolute;
		bottom: 15vh;
		/* background-color: #007400; */
		overflow: auto;
	}
	.giftInfo{
		display: flex;
		align-items: center;
		margin: 0 0 5vw 1vw;
		color: #FFFFFF;
	}
	.giftInfoImg1 , .giftInfoImg2{
		width: 6vw;
		height: 6vw;
	}
	.giftInfoFont{
		margin: 0 2vw;
	}
	.messageClass{
		display: flex;
		align-items: center;
		margin-left: 2vw;
		margin-top: 2vw;
		margin-bottom: 5vw;
	}
	.messageImg1{
		width: 10vw;
		height: 10vw;
		margin-right: 2vw;
	}
	.messageImg2{
		width: 10vw;
		height: 10vw;
		margin-right: 2vw;
	}
	.messageContent{
		/* display: flex; */
		margin-left: 2vw;
	}
	.messageGift{
		display: flex;
		align-items: center;
		color: #342c31;
	}
	.friendClass{
		display: flex;
		flex-wrap: wrap;
	}
	.friendContent{
		width: 18vw;
		height: 18vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		margin-left: 2vw;
		margin-top: 2vw;
		margin-bottom: 2vw;
		color: #7f7c58;
	}
	.friendImg{
		width: 10vw;
		height: 10vw;
	}
	.modifyTitle{
		font-weight: bold;
		text-align: center;
		margin-top: 10vw;
		margin-bottom: 10vw;
	}

	
	.modifyPwdClass .van-cell{
		margin-bottom: 3vw;
	}
	
	/* 自动滚动 */
	.list-dome-box {
		width: 100%;
		height: 40vh;
		position: absolute;
		bottom: 15vh;
		overflow: hidden;
	}
	.slide-wrapper {
		position: relative;
		/* margin-top: 10%; */
		width: 100%;
		/* height: 2rem; */
		height: 40vh;
		overflow: hidden;
		/* background-color: bisque; */
	}
	.slide-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.slide-item {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin: 0 0 5vw 1vw;
		color: #FFFFFF;
	}
	
	.msgbox {
		width: 100%;
		height: 50px;
	}
	.msgPosition {
		position: fixed;
		bottom: 0px;
	}
	.msgbtn {
		text-align: left;
		text-indent: 20px;
		margin-bottom: 5px;
		padding: 28px 0;
		background: url(@/assets/img/tomb/messageBoard.png);
		background-size: 120% 315%;
		background-position: 77%;
		color: #342c31;
		height: 80px;
	}
	::v-deep(.password .van-field__control) {
       -webkit-text-security:disc;
       text-security:disc;
    }
</style>